<!-- 新建联系人弹窗 -->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="新增"
    width="30%"
    draggable
    overflow
    @close="handleClose"
  >
    <div class="crossRope" />
    <el-form
      ref="formModelRef"
      label-width="80px"
      style="margin-top: 5%"
      :model="formModel"
      :rules="formModelRules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="姓名"
            style="width: 80%"
            required
            prop="realName"
          >
            <el-input v-model="formModel.realName" size="small" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="联系电话"
            style="width: 80%"
            required
            prop="phoneNumber"
          >
            <el-input v-model="formModel.phoneNumber" size="small" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="crossRope" />
    <div style="text-align: right; margin-top: 2%">
      <el-button color="#1E3485" :icon="Select" size="small">保存</el-button>
      <el-button :icon="CloseBold" size="small" @click="handleClose"
        >取消</el-button
      >
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { ElDialog } from "element-plus";
import { Select, CloseBold } from "@element-plus/icons-vue";

// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean
});
const dialogFormVisible = ref(false);
watch(
  () => props.visible,
  val => {
    dialogFormVisible.value = val;
  },
  { immediate: true }
);
const emit = defineEmits(["close"]);
function handleClose() {
  emit("close", false);
}

// 表单相关
let formModel = reactive({
  realName: "",
  phoneNumber: ""
});

// 表单验证
const formModelRules = {
  realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phoneNumber: [{ required: true, message: "请输入手机号码", trigger: "blur" }]
};
</script>

<style scoped></style>
